<!-- 我的 -->
<template>
	<view>
		<view class="my">
			<!-- 头部 -->
			<view @click="skip('/pages/me/personage')" class="flex flex-jc-sb head">
				<view class="flex flex-ai-c">
					<view style="margin-right: 20rpx;">
						<u-avatar :size="60" :src="userinfo.avatar"></u-avatar>
					</view>
					<view>
						<text class="font-36 font-bold">{{token ? userinfo.nickname : '请登录'}}</text>
						<view v-if="token">
							<view class="text" style="margin-top: 10rpx;">{{userinfo.mobile}}</view>
						</view>
					</view>
				</view>
				<u-icon name="arrow-right" size="26rpx"></u-icon>
			</view>
	
			<!-- 我的收益 -->
			<view class="my_money flex flex-jc-sb">
				<view class="flex flex-ai-c flex-jc-sb" @click="skip(`/pages/me/wallet`)">
					<view>
						<view class="font-32" style="margin-bottom: 28rpx;">钱包</view>
						<view class="flex flex-ai-c">
							<view class="text" style="margin-right: 10rpx;">{{userinfo.money || '0.00'}}</view>
							<u-icon name="arrow-right" size="24rpx" />
						</view>
					</view>
					<view style="margin-left: 30rpx;">
						<i-icon icon="money" size="82rpx" />
					</view>
				</view>
				<view style="width: 2rpx;background: #F1F1F1;"></view>
				<view class="flex flex-ai-c flex-jc-sb" @click="skipStore">
					<view>
						<view class="font-32" style="margin-bottom: 28rpx;">
							<!-- 线上商城 -->线上商城
						</view>
						<view class="flex flex-ai-c">
							<view class="text" style="margin-right: 10rpx;">最高返200元</view>
							<u-icon name="arrow-right" size="24rpx" />
						</view>
					</view>
					<view style="margin-left: 30rpx;">
						<i-icon icon="shop12" size="82rpx" />
					</view>
				</view>
			</view>
	
			<!-- 我的设备 -->
			<view class="my_facility">
				<view class="title">
					<text>我的订单</text>
					<view @click="changeIcon(0)">
						<text style="font-weight: 300;">查看全部订单</text>
						<u-icon name="arrow-right" size="24rpx"></u-icon>
					</view>
				</view>
	
				<view class="my_facility_2 flex flex-ai-c">
					<view v-for="(item, index) in icons" :key="index" @click="changeIcon(index)">
						<i-icon :icon="item.icon" :size="item.size" />
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
	
			<!-- 我的服务 -->
			<view class="my_service">
				<view class="title">
					<text>我的服务</text>
				</view>
				<view class="my_service-list">
					<view class="flex flex-jc-sb" @click="skip(`/pages/me/welfare`)">
						<view class="flex flex-ai-c">
							<view style="margin: 5rpx 10rpx 0 0;">
								<i-icon icon="paidui" size="50rpx" />
							</view>
	
							<text>排队免单</text>
						</view>
						<view class="flex flex-ai-c">
							<text>随机免单，最高200元</text>
							<u-icon name="arrow-right" size="24rpx"></u-icon>
						</view>
					</view>
					<view class="flex flex-jc-sb" @click="codeShow = true">
						<view class="flex flex-ai-c">
							<view style="margin: 5rpx 10rpx 0 0;">
								<i-icon icon="fuli" size="50rpx" />
							</view>
	
							<text>官方福利群</text>
						</view>
						<view class="flex flex-ai-c">
							<text>领福利</text>
							<u-icon name="arrow-right" size="24rpx"></u-icon>
						</view>
					</view>
					<view style="border-top: 2rpx solid #EEEFF0;padding: 0;"></view>
					<!-- border-top: 2rpx solid #EEEFF0; -->
					<view class="flex flex-jc-sb">
						<view class="flex flex-ai-c">
							<view style="margin: 5rpx 10rpx 0 0;">
								<i-icon icon="kefu2" size="50rpx" />
							</view>
							<text>专属客服</text>
						</view>
						<view class="kfs flex flex-ai-c">
							<button type="default" open-type="contact">联系专属客服</button>
							<u-icon name="arrow-right" size="24rpx"></u-icon>
						</view>
					</view>
				</view>
			</view>
	
		</view>
		<!-- https://xy.outletds.com/poto/welfare.png -->
		<u-modal width="650" :value="codeShow" :showConfirmButton="false" closeOnClickOverlay closeable>
			<view style="width: 650rpx;height: 803rpx;position: relative;">
				<image show-menu-by-longpress style="width: 650rpx;height: 803rpx;"
					src="https://xy.outletds.com/uploads/icon/welfare.png"></image>
				<view style="position: absolute;right: 38rpx;top: 38rpx;" @click="codeShow = false">
					<u-icon name="close" size="60rpx" color="#999999" />
				</view>
			</view>
		</u-modal>
		<activity @rejectProfit="rejectProfit" :rebateMoney="rebate_money" :show='show' @receive="receive" />
	
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	import activity from '@/components/activity.vue';
	import user from '@/api2/user.js';
	export default {
		components: {
			activity
		},
		data() {
			return {
				rebate_money: 0,
				codeShow: false,
				show: false,
				icons: [{
						name: '全部',
						icon: 'daifukuan',
						size: '60rpx'
					},
					{
						name: '待付款',
						icon: 'daifukuan2',
						size: '60rpx'
					},
					{
						name: '待出货',
						icon: 'daishouhuo',
						size: '60rpx'
					},
					{
						name: '已完成',
						icon: 'yiwancheng',
						size: '60rpx'
					},
					{
						name: '售后',
						icon: 'shouhou',
						size: '60rpx'
					}
				],
				userinfo: {
					income: {

					},
					device: {

					}

				},
				token: uni.getStorageSync('token'),
				id: null
			};
		},
		mounted() {
			this.token = uni.getStorageSync('token')
			this.init()
		},
		methods: {
			async getUserInfo() {
				const res = await user.getUserInfo()
				if (res.code == 200) {
					// this.setUserInfo(res.data)
					uni.setStorageSync('userInfo', res.data)
					let reg = /^(\d{3})\d{4}(\d{4})$/
					// mobile
					res.data.mobile = res.data.mobile.replace(reg, "$1****$2")
					this.userinfo = res.data
					this.checkProfit()
				}
				if (res.code == 9001) {
					this.token = ''
				}
			
			},
			async rejectProfit() {
				const res = await user.rejectProfit({
					id: this.id
				})
				if(res.code == 200) {
					this.show = false
				}
			},
			init(index){
				if(index !==2 ) return
				this.token = uni.getStorageSync('token')
				this.getUserInfo()
			},
			skipStore() {
				uni.switchTab({
					url: '/pages/tabs/index/index'
				})
			},
			async checkProfit() {
				const res = await user.checkProfit()
				if (res.data.show_flag === 1) {
					this.show = true
					this.id = res.data.id
					this.rebate_money = res.data.rebate_money
				}
			},
			...mapActions({
				setUserInfo: 'setUserInfo'
			}),
			//领取
			async receive() {
				const res = await user.acceptProfit({
					id: this.id
				})
				if (res.code == 200) {
					uni.showToast({
						title: '领取成功',
						icon: 'none',
						duration: 2000,
						success() {
							this.show = false
							uni.navigateTo({
								url: '/pages/me/line_up_order'
							})
						}
					})
				}
			},
			
			onRelaunck() {
				uni.showToast({
					title: '请登录！',
					icon: 'none',
					duration: 2000,
					success: () => {
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/index'
							})
						}, 1000)
					}
				})
			},
			skip(url) {
				if (!this.token) return this.onRelaunck()
				uni.navigateTo({
					url: url
				});

			},
			changeIcon(i) {
				// if (!this.token) return this.onRelaunck()
				this.$emit('changeTabs', i)
			},
		},
		options: {
			styleIsolation: 'shared'
		},
	}
</script>

<style scoped>
	page {
		background: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	/deep/.u-line {
		display: none;
	}
	/deep/.u-model__title{
		display: none;
	}
	/deep/.u-popup__content {
		background: none !important;
	}
	/deep/.u-model{
		background: none !important;
	}
	/deep/.u-mode-center-box {
		background: none !important;
	}
	// 默认样式
	button {
		font-size: 28rpx;
		font-weight: 300;
		color: #999999;
		padding: 0;
		margin-right: 8rpx;
		background: none;
	}

	// 边框样式
	button::after {
		border: 0;
	}

	// 点击时样式
	.button-hover {
		color: rgba(0, 0, 0, 0.6);
		background-color: #fff;
	}

	.kfs {

		/deep/ uni-button::after {
			border: 0 !important;
		}

		/deep/ uni-button {
			font-size: 28rpx;
			font-weight: 300;
			color: #999999;
			padding: 0;
			margin-right: 8rpx;
			background: none;
		}
	}

	.my {
		margin: 0 30rpx;

		.head {
			padding: 30rpx 0;
		}

		.title {
			background: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			border-bottom: 1px solid #EEEFF0;
			padding-bottom: 30rpx;

			&>text {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #333333;
			}

			&>view {
				display: flex;
				align-items: center;

				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				image {
					width: 12rpx;
					height: 20rpx;
					margin-left: 8rpx;
				}
			}
		}

		// 我的设备
		.my_facility {
			margin: 20rpx 0;
			padding: 30rpx;
			background: #fff;

			&_2 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 20rpx;

				&>view {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 20rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
			}
		}

		.my_service {
			padding: 30rpx 30rpx 0 30rpx;
			background: #fff;

			.my_service-list>view {
				padding: 20rpx 0;
			}

			.my_service-list {

				text {
					font-size: 28rpx;
					font-weight: 300;
					color: #999999;
					margin-right: 8rpx;
				}
			}
		}

		.my_money {
			background: #fff;
			padding: 30rpx;

		}

		.text {
			font-size: 28rpx;
			color: #999999;
		}
	}
</style>